<template>
  <template v-for="menu in menuList" :key="menu.id">
    <template v-if="!menu.children">
      <el-menu-item :index="menu.id + ''" @click="handleMenuItemClick(menu)">
        <span>{{ menu.name }}</span>
      </el-menu-item>
    </template>

    <el-sub-menu v-if="menu.children && menu.children.length > 0" :index="menu.id + ''">
      <template #title>
        <el-icon v-if="menu.icon">
          <!-- 字符串转组件 -->
          <component :is="changeTitle(menu.icon)" />
        </el-icon>
        <span>{{ menu.name }}</span>
      </template>

      <menu-v1 :menuList="menu.children" />
    </el-sub-menu>
  </template>
</template>

<script setup lang="ts">
  import { titleCase } from '@/utils'
  import { useRouter } from 'vue-router'

  interface IMenu {
    menuList: any
  }
  withDefaults(defineProps<IMenu>(), {})

  function changeTitle(icon: string) {
    return titleCase(icon.split('-').pop() as string)
  }

  // 菜单点击跳转
  const $router = useRouter()
  function handleMenuItemClick(menu: any) {
    $router.push(menu.url)
  }
</script>

<style lang="scss" scoped></style>
